<template>
  <div class="movie-list">
    <a-card
      hoverable
      v-for="(item, index) in movies"
      :key="index"
    >
      <img
        @click="showVideo(item)"
        alt="example"
        :title="'查看预告片'"
        :src="`${site}${item.posterKey}?imageMogr2/thumbnail/x1680/crop/945x1500`"
        slot="cover"
      />
      <a-card-meta
        style=""
        class="summary"
        :title="item.title"
        @click="toMovieDetail(item)"
      >
        <template slot="description" :title="item.summary">{{ item.summary }}</template>
      </a-card-meta>
      <template class="ant-card-actions" slot="actions">
        <a-badge>
          <a-icon slot="count" type="clock-circle" style="color: #52c41a"></a-icon>
          <a class="head-example">{{ item.meta.updatedAt | formateDate }}前更新</a>
        </a-badge>
        <a-badge>
          <a-icon slot="count" type="star" :numberStyle="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"></a-icon>
          <a class="head-example">{{ item.rate }} 分</a>
        </a-badge>
      </template>
    </a-card>
    <tip ref="tip">
      <div style="font-size: 20px; color:#fff; height: 100px;line-height: 100px;">
        <a-icon type="frown"></a-icon> 暂无预告片
      </div>
    </tip>
    <not-found v-if="!movies.length"></not-found>
    <video-dialog :video-data="videoData" :show-dialog="showDialog" @closeDialog="closeDialog"></video-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

import videoDialog from './videoDialog'
import tip from './tip'
import notFound from './404.vue'

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

export default {
  name: 'movieList',
  props: {
  },
  data () {
    return {
      site: 'http://video.fanchao.site/',
      showDialog: false,
      videoData: {}
    }
  },
  computed: {
    ...mapGetters([
      'movies'
    ])
  },
  filters: {
    formateDate (time) {
      return moment(time).fromNow(true)
    }
  },
  watch: {
  },
  mounted () {
  },
  components: {
    videoDialog,
    tip,
    notFound
  },
  methods: {
    toMovieDetail ({ _id }) {
      this.$router.push({ path: '/movieDetail', query: { _id }})
    },
    showVideo (item) {
      if (!item.videoKey) {
        this.$refs.tip.show()
        return
      }
      this.showDialog = true
      this.videoData = item
    },
    closeDialog () {
      this.showDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.movie-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 1%;
  >.ant-card {
    width: 230px;
    height: 640px;
    margin: 8px;
    .head-example {
      color: #49c5b6
    }
  }
}
</style>
<style lang="scss">
  .movie-list{
    .ant-card-body{
      >.ant-card-meta{
        height: 100%;
        >.ant-card-meta-detail{
          >.ant-card-meta-title{
            color: #49c5b6;
          }
          >.ant-card-meta-description{
            color: #49c5b6;
            line-height: 20px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 8;
            -webkit-box-orient: vertical!important;
          }
        }
      }
    }
  }
</style>
